import QtQuick 1.0
import "schemeControl.js" as SchemeControl

Rectangle {
    id : root
    width: 1100
    height: 400
	ccolor: "transparent"
    // Define the constant for this object
    property real scaleFactor: root.width/800.0 //

    property int schemeIndex: 1
    /*Пропорциональное масштабирование
        - изменение

    */
    SCHEMES{
            id:schemeImage
            width: 1000
            height: 400
            anchors.fill: parent
            mod : SchemeControl.schemeNumToStr(schemeIndex);

            states: [
                    State {
                        name: "slideSchemeLeft";
                        },
                    State {
                        name: "slideSchemeRight";
                    }
            ]
            transitions: [
                   Transition { from: "*"; to: "slideSchemeLeft" // between states
                        SequentialAnimation {
                            SequentialAnimation {
                                 NumberAnimation{ target: schemeImage; property: "opacity"; to:0.; duration: 200}
                            }

                            PropertyAction { target: root; property: "schemeIndex"; value: SchemeControl.slideSchemeToLeft() }

                            PauseAnimation { duration: 100; }

                            SequentialAnimation {
                                 NumberAnimation{ target: schemeImage; property: "opacity";  to:1.; duration: 200}
                            }
                        }
                   },
                   Transition { from: "*"; to: "slideSchemeRight" // between states
                        SequentialAnimation {
                            SequentialAnimation {
                                NumberAnimation{ target: schemeImage; property: "opacity"; to:0.; duration: 200}
                            }

                            PropertyAction { target: root; property: "schemeIndex"; value: SchemeControl.slideSchemeToRight() }

                            PauseAnimation { duration: 100; }

                            SequentialAnimation {
                                NumberAnimation{ target: schemeImage; property: "opacity";  to:1.; duration: 200}
                            }
                        }
                  }
            ]
    }

    BUTTON{ /*to left*/
        id:buttonToLeft
        anchors.left: parent.left;
        anchors.verticalCenter: parent.verticalCenter;
        buttonImage: "toLeft.png";
        onClicked: {
            schemeImage.state = "";
            schemeImage.state = "slideSchemeLeft";
        }
    }
    BUTTON{ /*to right*/
        id:buttonToRight
        anchors.right: parent.right;
        anchors.verticalCenter: parent.verticalCenter;
        buttonImage: "toRight.png";
        onClicked: {
            schemeImage.state = ""; //
            schemeImage.state = "slideSchemeRight";
        }
    }
}
